    <script type="text/javascript">
jQuery(function ($) {
    if ($(".slide-pic").length > 0) {
        var defaultOpts = { interval: 5000, fadeInTime: 300, fadeOutTime: 200 };
        var _titles = $("ul.slide-txt li");
        var _titles_bg = $("ul.op li");
        var _bodies = $("ul.slide-pic li");
        var _count = _titles.length;
        var _current = 0;
        var _intervalID = null;
        var stop = function () { window.clearInterval(_intervalID); };
        var slide = function (opts) {
            if (opts) {
                _current = opts.current || 0;
            } else {
                _current = (_current >= (_count - 1)) ? 0 : (++_current);
            };
            _bodies.filter(":visible").fadeOut(defaultOpts.fadeOutTime, function () {
                _bodies.eq(_current).fadeIn(defaultOpts.fadeInTime);
                _bodies.removeClass("cur").eq(_current).addClass("cur");
            });
            _titles.removeClass("cur").eq(_current).addClass("cur");
            _titles_bg.removeClass("cur").eq(_current).addClass("cur");
        };
        var go = function () {
            stop();
            _intervalID = window.setInterval(function () { slide(); }, defaultOpts.interval);
        };
        var itemMouseOver = function (target, items) {
            stop();
            var i = $.inArray(target, items);
            slide({ current: i });
        };
        _titles.hover(function () { if ($(this).attr('class') != 'cur') { itemMouseOver(this, _titles); } else { stop(); } }, go);
        _bodies.hover(stop, go);
        go();
    }
});
</script>
<style>
    img { border: 0px; }
#banner { margin: 20px auto 0px auto; padding: 0px; width: 1180px; height: 400px; }
.slides { margin: 0px auto; width: 1180px; height: 400px; overflow: hidden; position: relative; }
.slide-pic { margin: 0px; padding: 0px; width: 1180px; overflow: hidden; list-style: none; }
    .slide-pic img { width: 1180px; height: 400px; }
    .slide-pic li { display: none; }
        .slide-pic li.cur { display: block; }
.slide-li { margin: 0px; padding: 0px; left: 0px; bottom: 0px; position: absolute; }
    .slide-li li { margin: 0px; padding: 0px; width: 192px; height: 10px; float: left; overflow: hidden; list-style: none; }
    .slide-li a { width: 192px; height: 10px; color: #000; font-size: 12px; display: block; }
        .slide-li a:hover { color: #F00; text-decoration: none; }
.op li { background: #999999; filter: alpha(opacity=60); opacity: 0.6; }
    .op li.cur { background: #666666; }
.slide-txt span { display: none; }

</style>
    <div id="banner">
        <div class="slides">
            <ul class="slide-pic">
                <!--{eval $idx = 1;}-->
                <!--{loop $adv_list $adv}-->
                <li <!--{if $idx == 1}-->class="cur"<!--{/if}-->><a href="{$adv['durl']}" target="_blank">
                    <img alt="" src="{$adv['code']}" /></a></li>
                <!--{eval $idx++;}-->
                <!--{/loop}-->
            </ul>
            <ul class="slide-li op">
                <!--{eval $idx = 1;}-->
                <!--{loop $adv_list $adv}-->
                <li <!--{if $idx == 1}-->class="cur"<!--{/if}-->></li>
                <!--{eval $idx++;}-->
                <!--{/loop}-->
            </ul>
            
            <ul class="slide-li slide-txt">
                <!--{eval $idx = 1;}-->
                <!--{loop $adv_list $adv}-->
                <li  <!--{if $idx == 1}-->class="cur"<!--{/if}-->><a href="#"></a></li>
                <!--{eval $idx++;}-->
                <!--{/loop}-->
            </ul>
        </div>
    </div>
